<template>
  <div class="tree_item_box">
    <div
      class="column-start-start linkLine_default"
      v-for="(item, s_index) in localData"
      :key="s_index"
      :class="{
        linkLine_first: (s_index === 0) & (localData.length > 1),
        linkLine_half_top: s_index === 0 && localData.length === 1,
        linkLine_last: s_index === localData.length - 1 && s_index !== 0,
        third_layer: !item.isGroup,
        linkLine_half_top_hide: item.root,
        second_layer: item.isGroup
      }"
    >
      <div class="row-flex-start basic_banner" :class="{ active_color: item.expand || false }">
        <div
          class="reTree_icon"
          v-if="item.isGroup"
          style="width: 20px; height: 20px"
          :class="{
            reTree_default_icon: item.children && item.children.length === 0,
            reTree_collapse_icon: item.expand && item.children && item.children.length > 0,
            reTree_expand_icon: !item.expand && item.children && item.children.length > 0
          }"
        >
        </div>
        <div class="layer_text nowrap">
          <el-radio-group v-model="item.logicalRelation" v-if="item.isGroup">
            <el-radio-button :label="opt.label" :value="opt.value" v-for="(opt, key) in logicalRelationOptions" :key="key">
              {{ opt.label }}
            </el-radio-button>
          </el-radio-group>
          <div class="item_form" v-if="!item.isGroup">
            <el-select v-model="item.field" style="width: 200px; margin-right: 4px" clearable>
              <el-option v-for="field in fields" :key="field.prop" :label="field.fieldName" :value="field.prop"></el-option>
            </el-select>
            <el-select v-model="item.condition" style="width: 100px; margin-right: 4px" clearable
              ><el-option v-for="opt in operOptions" :label="opt.label" :value="opt.value" :key="opt.value" />
            </el-select>
            <el-input v-if="item.condition !== 'NU' && item.condition !== 'NN'" v-model="item.value" style="width: 200px; margin-right: 4px" placeholder="请输入条件" />
          </div>

          <div class="group_tools">
            <el-button icon="folderAdd" type="primary" size="small" link @click="addGroup(s_index)" v-if="item.isGroup">添加分组 </el-button>
            <el-button icon="circlePlus" type="primary" size="small" link @click="addItem(s_index)" v-if="item.isGroup"> 添加条件 </el-button>
            <el-button icon="delete" type="danger" size="small" link @click="delGroup(s_index)">删除 </el-button>
          </div>
        </div>
      </div>
      <display-rule-item v-model="item.children" :fields="fields" v-if="item.isGroup && item.children && item.children.length > 0"> </display-rule-item>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DisplayRuleItem',
  props: {
    modelValue: {
      type: Array,
      default: () => []
    },
    fields: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      localData: [],
      logicalRelationOptions: [
        {
          label: '所有',
          value: 'and'
        },
        {
          label: '任一',
          value: 'or'
        },
        {
          label: '排除',
          value: 'not'
        }
      ],
      operOptions: [
        {
          label: '等于',
          value: 'EQ'
        },
        {
          label: '不等于',
          value: 'NE'
        },
        {
          label: '为空',
          value: 'NU'
        },
        {
          label: '不为空',
          value: 'NN'
        },
        {
          label: '大于',
          value: 'GT'
        },
        {
          label: '大于等于',
          value: 'GE'
        },
        {
          label: '小于',
          value: 'LT'
        },
        {
          label: '小于等于',
          value: 'LE'
        },
        {
          label: '正则匹配',
          value: 'RE'
        }
      ]
    };
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.localData = newVal;
      },
      immediate: true,
      deep: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal);
      },
      deep: true
    }
  },
  methods: {
    // itemClick(item) {
    //   item.expand = !item.expand;
    //   this.$emit('itemClick', item);
    //   if (!item.children) {
    //     this.$emit('valClick', item);
    //   }
    // },
    addGroup(i) {
      this.localData[i].children.push({
        isGroup: true,
        children: [],
        logicalRelation: 'and'
      });
    },
    addItem(i) {
      this.localData[i].children.push({
        field: '',
        condition: '',
        value: '',
        isGroup: false
      });
    },
    delGroup(i) {
      if (this.localData[i] && this.localData[i].root) {
        this.$message.error('根节点没法删除！');
      } else {
        this.localData.splice(i, 1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.tree_item_box {
  position: relative;
  width: 100%;

  .column-start-start {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    .row-flex-start {
      display: flex;
      display: -webkit-flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;

      .reTree_icon {
        width: 12px;
        height: 12px;
        margin-right: 10px;
        cursor: pointer;
      }

      .reTree_default_icon {
        background: url('@code/assets/img/open.png') no-repeat center center;
        background-size: contain;
      }

      .reTree_collapse_icon {
        background: url('@code/assets/img/open.png') no-repeat center center;
        background-size: contain;
      }

      .reTree_expand_icon {
        background: url('@code/assets/img/open.png') no-repeat center center;
        background-size: contain;
      }

      .layer_text {
        font-size: 12px;
        flex: 1;

        .item_title {
          padding-left: 10px;
          cursor: pointer;
        }

        .item_form {
          display: inline-block;
          margin-left: 10px;
          width: auto;
        }

        .group_tools {
          display: inline-block;
          margin-left: 20px;
        }
      }

      .nowrap {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      :deep(.el-link) {
        margin-left: 10px;
      }

      :deep(.el-link--inner) {
        font-size: 12px;
      }
    }

    .basic_banner {
      position: relative;
      width: 100%;
      padding-bottom: 18px;
    }

    .active_color {
      color: #409eff;
    }
  }

  .linkLine_default::after {
    content: '';
    position: absolute;
    height: 100%;
    width: 1px;
    left: 6px;
    top: 0px;
    background: #c3c5c8;
  }

  .linkLine_first::after {
    content: '';
    position: absolute;
    /* 为了触顶 */
    top: -18px;
    height: calc(100% + 18px);
    width: 1px;
    left: 6px;
    background: #c3c5c8;
  }

  .linkLine_half_top::after {
    content: '';
    position: absolute;
    height: 33px;
    top: -20px;
    width: 1px;
    left: 6px;
    background: #c3c5c8;
  }

  .linkLine_half_top_hide::after {
    height: 0px;
  }

  .linkLine_last::after {
    content: '';
    position: absolute;
    height: 13px;
    width: 1px;
    left: 6px;
    top: 0px;
    background: #c3c5c8;
  }

  .second_layer {
    position: relative;
    width: 100%;
    padding-left: 25px;
  }

  .second_layer::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 19px;
    left: 6px;
    top: 13px;
    background: #c3c5c8;
  }

  .linkLine_half_top_hide::before {
    width: 0px;
  }

  .third_layer {
    position: relative;
    // padding-bottom: 15px;
    width: 100%;
    //padding-left: 40px;
    padding-left: 15px;
    color: #999999;
  }

  .third_layer::before {
    content: '';
    position: absolute;
    height: 1px;
    width: 22px;
    left: 6px;
    top: 13px;
    background: #c3c5c8;
  }
}
</style>